<template>
	<view>
		
		<view class="box1">
			<view class="profily">
				<!-- 标题 日期、类别。。。-->
				<view style="font-size: 18px; font-weight: 900">{{activityInfo.activityTitle}}</view>
				<view style="font-size: 14px; color: #c2c2c2; margin-top: 13px;">{{activityInfo.updateTime}} {{activityInfo.classificationName}}</view>
				<!-- 用户or本平台 -->
				<view v-if="activityInfo.headUrl" class="base">
					<u-avatar v-if="activityInfo.sex==0" :src="activityInfo.headUrl" mode="circle" size='large' show-sex='true' sex-icon='woman'></u-avatar>
					<u-avatar v-else :src="activityInfo.headUrl" mode="circle" size='large' show-sex='true' sex-icon='man'></u-avatar>
					<div style="margin-left: 10px;">
						<view style="font-size: medium; font-weight: 600; font-size: 16px;">
							{{activityInfo.realName}}
						</view>
						<view style="font-size: 14px; margin-top: 5px;">
							{{activityInfo.majorClass}}班
						</view>
					</div>
					<button class="button" @click="user_info(activityInfo.openId)">详情</button>
				</view>
				<view v-else style="margin: 35rpx 0rpx">
					<u-icon name="home-fill" color="#6c6c6c" size="28"></u-icon>
					<text style="margin-left: 15rpx;">本平台发布</text>
				</view>
				
				<!-- 地区、时间 -->
				<view style="width: 325px; background-color: #f3f3f3; border-radius: 10rpx; color: #c6c6c6;">
					<div style='height: 15rpx;'></div>
					<view style='margin-left: 10px;'>
						<u-icon name="calendar"></u-icon>
						<text style="color: #000000; margin-left: 3px; margin-right: 5px;">活动日期:</text>
						{{activityInfo.activityDate}}
					</view>
					<div style='height: 15rpx;'></div>
					<view style='margin-left: 10px;'>
						<u-icon name="calendar"></u-icon>
						<text style="color: #000000; margin-left: 3px; margin-right: 5px;">报名截止:</text>
						{{activityInfo.endDate}}
					</view>
					<div style='height: 15rpx;'></div>
					<view style='margin-left: 10px;'>
						<u-icon name="calendar"></u-icon>
						<text style="color: #000000; margin-left: 3px; margin-right: 5px;">费用说明:</text>
						{{activityInfo.costDescription}}
					</view>
					<div style='height: 15rpx;'></div>
					<view style='margin-left: 10px;'>
						<u-icon name="calendar"></u-icon>
						<text style="color: #000000; margin-left: 3px; margin-right: 5px;">联系方式:</text>
						{{activityInfo.contactInformation}}
					</view>
					<div style='height: 15rpx;'></div>
					<view style='margin-left: 10px;'>
						<u-icon name="map"></u-icon>
						<text style="color: #000000; margin-left: 3px; margin-right: 5px;">活动地区:</text>
						{{activityInfo.activityArea}}
					</view>
					<div style='height: 15rpx;'></div>
					<view style='margin-left: 10px;'>
						<u-icon name="calendar"></u-icon>
						<text style="color: #000000; margin-left: 3px; margin-right: 5px;">详细地址:</text>
						{{activityInfo.detailedPlace}}
					</view>
					<div style='height: 15rpx;'></div>
				</view>
				
				<!-- 指示器、自动轮播、自动轮播时间间隔、切换时间、 -->
				<swiper
					v-if="swiperImgUrls"
					class="swiper-block" 
					:indicator-dots="true" 
					:autoplay="true" 
					:interval="3000" 
					:duration="1000"
					circular='true'
					effect3d='true'
					current='0'
					@change="swiperChange">
					<swiper-item class="swiper-item" v-for="(item, index) in swiperImgUrls" :key='item'>
						<image :src="item" :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				
				<!-- 内容 -->
				<view class="u-content" >
					<u-parse :html="activityInfo.detailedDescription" :selectable="true"></u-parse>
				</view>
				
				<view style="font-size: 14px; color: #c2c2c2; margin-top: 13px;">{{activityInfo.updateTime}} {{activityInfo.classificationName}}</view>	
			</view>
			
			<!-- 报名 -->
			<view class="box3">
				<view class="profily">
					<view v-if="apply_show" class="v1_view" @click="apply()">
						<text v-if="activityInfo.isApply == 0" class="v1_text">马上报名</text>
						<text v-else class="v1_text">取消报名</text>
					</view>
					<view v-else class="v2_view">
						<text class="v1_text">报名结束</text>
					</view>
					<view style="display: flex;" @click="applyUsers()">
						<text style="font-size: 15px; margin-top: 15rpx; margin-left: 40rpx;">
							{{ activityInfo.applyTotal }}人报名
						</text>
						<image class="gengduo" src="http://qiniu.chzuchen.xyz/other/3a9fb7a8e99147da89cf76972083c060.png"></image>
					</view>
				</view>
			</view>
			
		</view>
	
		<!-- 评论区 -->
		<view class="box2">
			<view class="profily">
				<view style="margin-left: 35rpx;margin-top: 20rpx; display: flex;">
					评论 <text style="color: #c2c2c2;"> （{{ activityInfo.commentNumber }}条） </text>
					<!-- <button class="button2" @click="user_info(openId)">
						<div style="margin-top: -7rpx;">
							发布评论
						</div>			
					</button> -->
				</view>
				<u-line color="#bfbfbf" length='90%' :hair-line='false' margin="20rpx 35rpx"/>
				
				<view class="comment" v-for="(res, index) in commentList" :key="res.id">
					<view class="left"><image :src="res.headUrl" mode="aspectFill"></image></view>
					<view class="right">
						<view class="top">
							<view class="name">{{ res.realName }}</view>
						</view>
						<view class="content">{{ res.content }}</view>
						<view class="reply-box">
							<!-- v-if 控制展示评论条数 -->
							<view class="item" v-for="(item, index) in res.replyList" :key="item.id" v-if="index < 2">
								<view class="username" style="display: flex;">
									<view class="left"><image style="width: 35rpx; height: 35rpx; margin-right: 5rpx;" :src="item.fromHeadUrl" mode="aspectFill"></image></view>
									{{ item.fromRealName }} 回复
									<view class="left"><image style="width: 35rpx; height: 35rpx; margin-right: 5rpx; margin-left: 10rpx;" :src="item.toHeadUrl" mode="aspectFill"></image></view>
									{{ item.toRealName }}
								</view>
								<view class="text">{{ item.content }}</view>
							</view>
							<view class="all-reply" @click="toAllReply(res)" v-if="res.replyList.length > 0">
								共{{ res.replyList.length }}条回复
								<u-icon class="more" name="arrow-right" :size="26"></u-icon>
							</view>
						</view>
						<view class="bottom">
							{{ $u.timeFrom(res.updateTime, 'yyyy-mm-dd') }}
							<view class="reply" @click="commentShow(res)">回复</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 白板 -->
		<view style="height: 85px;"></view>
		
		<!-- 点赞、收藏 -->
		<view class="bottom_naviga">
			<view class="comment_push" @click="commentShow()">
				<u-icon style="margin-left: 20rpx;" name="edit-pen-fill" size="28"></u-icon>
				<view class="text">发评论</view>
			</view>
			<view style="margin-left: 220rpx; margin-top: 40rpx;" @click="like()">
				<u-icon v-if="activityInfo.isLike==0" class="icon" name="thumb-up" size="28"></u-icon>
				<u-icon v-else class="icon" name="thumb-up-fill" size="28"></u-icon>
				<text class="text">{{activityInfo.supportNumber}}</text>
			</view>
			<view style="margin-left: 25rpx; margin-top: 40rpx;" @click="collection()">
				<u-icon v-if="activityInfo.isCollection==0" class="icon" name="star" size="28"></u-icon>
				<u-icon v-else class="icon" name="star-fill" size="28"></u-icon>
				<text class="text">{{activityInfo.collectionNumber}}</text>
			</view>
			<view style=" margin-top: 10rpx;">
				<button class="share-b" data-name="shareBtn" open-type="share">
					<u-icon class="icon" name="zhuanfa" size="28"></u-icon>
					<text style="font-size: 26rpx; margin-left: 10rpx;">分享</text>
				</button>
			</view>
		</view>
		
		<!-- 删除、编辑按钮 -->
		<view v-if="show" style="position: fixed; left: 15rpx; bottom: 210rpx;" @click="deleteInfo"> 
			<image src="../../static/delete.png" style="width:60rpx; height: 60rpx;"></image>
		</view>
		<view v-if="show" style="position: fixed; left: 15rpx; bottom: 135rpx;" @click="editInfo">
			<image src="../../static/edit.png" style="width:60rpx; height: 60rpx;"></image>
		</view>
		
		<!-- 发送评论 -->
		<view class="plBox" v-if="comment_show">
			<textarea auto-height="true" 
					  maxlength="-1"
					  :show-confirm-bar="false"
					  cursor-spacing="100" 
					  fixed="true"
					  placeholder="评论" 
					  v-model="plValue"
					  @input="changeDisabled"
					  >
			</textarea>
			<button plain="true" @click="send">发送</button>
			<button plain="true" @click="commentFail" style="margin-left: 20rpx;">取消</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				commentList: [],
				activityInfo: {},
				/* 轮播 */
				swiperdata:[],
				swiperImgUrls: [],
				currentIndex:0,
				/* 0-互助类别，1-活动类别，2-相册类别，3-资讯类别  <uni-calendar lunar="" @change=""></uni-calendar>*/
				params: {
					topicType: 1,
					topicId: ""
				},
				commentToData: {
					topicId: "",
					topicType: 1,
					fromUid: this.$store.state.vuex_user.openId,
					content: ""
				},
				replyData: {
					commentId: "",
					replyId: "",
					replyType: 1,
					content: "",
					fromUid: this.$store.state.vuex_user.openId,
					toUid: "",
				},
				// 默认禁止点击按钮
				plValue: '',
				comment_show: false,
				comment_res: '',
				show: false,
				apply_show: false
			};
		},
		onLoad(params) {
			if(!params) {
			   uni.showToast({
				icon:"none",
				title:"详情获取失败，请重试"
			   })
			} else {
				// this.activityInfo = JSON.parse(decodeURIComponent(params.activityInfo));
				this.getData(JSON.parse(decodeURIComponent(params.info)));
				// this.swiperImgUrls = this.activityInfo.imageUrlList
			}
			this.getComment(JSON.parse(decodeURIComponent(params.info)));
		},
		//刷新报名人数，但用了另一种方法
		// onShow() {
		// 	uni.$on("info", (e)=>{
		// 		this.getData(JSON.parse(decodeURIComponent(e)));//需要重新访问一下接口。
		// 	}) 
		// },
		// // 用这种方法需要清除，负责会一直调用多次接口
		// onUnload() {
		// 	// 清除监听
		// 	uni.$off('info');
		// },
		// 或者有组件的使用不了小程序的生命周期可以使用  beforedestroy
		methods: {
			async deleteInfo() {
				var that = this
				uni.showModal({
					mask: true,
					title: '温馨提示',
					content: '您确实删除吗？删除后将不可恢复！',
					// cancelColor: '#f11356',
					confirmColor: '#f11356',
					success(res) {
						that.$u.api.activityDeleteByIds([that.activityInfo.id]).then((res) => {
							if(res.code == 200) {
								that.$u.route({
									type: 'reLaunch',
									url: 'pages/activity/activity',
								})
								uni.showToast({
									icon: "success",
									title: "删除成功"
								})
							} else {
								uni.showToast({
									icon: "error",
									title: "删除失败"
								})
							}
						})
					}
				})
			},
			async editInfo() {
				uni.navigateTo({
					url: '/pages/activity/new_activity?activityInfo=' + encodeURIComponent(JSON.stringify(this.activityInfo))
				});
			},
			// 跳转到全部回复
			toAllReply(comment) {
				uni.navigateTo({
					url: '/pages/comment/reply?comment=' + encodeURIComponent(JSON.stringify(comment))
				});
			},
			//评论
			async commentTo(content) {
				this.commentToData.topicId = this.activityInfo.id
				this.commentToData.content = this.plValue
				await this.$u.api.commentToAdd(this.commentToData).then((res) => {
					if(res.code == 200) {
						//成功后 置空、刷新评论、页面评论总数+1、关闭评论框
						this.plValue = ''
						this.getComment(this.activityInfo)
						this.activityInfo.commentNumber = this.activityInfo.commentNumber + 1
						this.comment_show = false
						uni.showToast({
							icon: "success",
							title: "评论成功"
						})
					} else {
						uni.showToast({
							icon: "error",
							title: "评论失败"
						})
					}
				}) 
			},
			//回复
			async reply(comment) {
				this.replyData.commentId = comment.id
				this.replyData.replyId = this.activityInfo.id
				this.replyData.content = this.plValue
				this.replyData.toUid = comment.fromUid
				await this.$u.api.replyAdd(this.replyData).then((res) => {
					if(res.code == 200) {
						//成功后 置空、刷新评论、页面评论总数+1
						this.plValue = ''
						this.getComment(this.activityInfo)
						this.activityInfo.commentNumber = this.activityInfo.commentNumber + 1
				 		uni.showToast({
				 			icon: "success",
				 			title: "回复成功"
				 		})
				 	} else {
				 		uni.showToast({
				 			icon: "error",
				 			title: "回复失败"
				 		})
				 	}
				}) 
			}, 
			user_info(openId) {
				uni.navigateTo({
					url: "/pages/seach/seach_info?id=" + openId,
				});
			},
			// 评论列表
			async getComment(activityInfo) {
				this.params.topicId = activityInfo.id
				await this.$u.api.commentSelect(this.params).then((res) => {
					if(res.code == 200) {
						this.commentList = res.data
						console.log("评论获取成功==", this.commentList);
					} else {
						uni.showToast({
							icon: "error",
							title: "评论获取失败"
						})
					}
				}) 
			},
			//评论输入框 动态监控
			changeDisabled(e) {
				console.log(e);
				this.plValue = e.detail.value
			},
			send() {
				if(this.plValue == '' || this.plValue == null) {
					uni.showToast({
						icon: "error",
						title: "内容不能为空"
					})
				} else {
					if(this.comment_res == null) {
						this.commentTo()
					} else {
						this.reply(this.comment_res)
					}
				}
			},
			commentShow(res) {
				this.comment_show = true
				this.comment_res = res
			},
			commentFail() {
				this.comment_show = false
				this.plValue = ''
			},
			swiperChange(event) {
				// console.log(event)
				this.currentIndex = event.detail.current
			},
			async getData(info) {
				const params = {
					page: 1,
					size: 10,
					id: info.id,
					userId: this.$store.state.vuex_user.openId,
				}
				await this.$u.api.activitySelectBy(params).then(res =>  {
					console.log("活动详情",res.data);
					if(res.code!="200") {
						uni.showToast({
							icon:"none",
							title:"详情获取失败，请重试"
						})
					} else {
						this.activityInfo = res.data[0]
						this.swiperImgUrls = this.activityInfo.imageUrlList
					}
				})
				//判断删除、编辑按钮true or false
				this.show = this.activityInfo.userId == this.$store.state.vuex_user.openId ? true : false
				//判断报名是否结束
				let date = new Date();	//Fri Oct 29 2021 16:37:56 GMT+0800 (CST)
				// let timestamp = new Date().getTime();	//1635496676223		(毫秒级)
				// let y= date.getFullYear(); //获取完整的年份(4位)
				// let m= date.getMonth(); //获取当前月份(0-11,0代表1月)
				// let d= date.getDate(); //获取当前日(1-31)
				// let w= date.getDay(); //获取当前星期X(0-6,0代表星期天)
				// let h= date.getHours(); //获取当前小时数(0-23)
				// let i= date.getMinutes(); //获取当前分钟数(0-59)
				// let s= date.getSeconds(); //获取当前秒数(0-59)
				let endDate = new Date(this.activityInfo.endDate);
				this.apply_show = endDate >= date ? true : false
			},
			//点赞
			async like() {
				this.activityInfo.userId = this.$store.state.vuex_user.openId
				await this.$u.api.activityLike(this.activityInfo).then(res =>  {
					if(res.code == 200) {
						//操作页面变化
						if(this.activityInfo.isLike == 0) {
							this.activityInfo.isLike = 1
							this.activityInfo.supportNumber = this.activityInfo.supportNumber + 1
							uni.showToast({
								icon:"success",
								title:"点赞成功"
							})
						} else {
							this.activityInfo.isLike = 0
							this.activityInfo.supportNumber = this.activityInfo.supportNumber - 1
							uni.showToast({
								icon:"success",
								title:"取消点赞成功"
							})
						}
					} else {
						uni.showToast({
							icon:"error",
							title:"点赞操作失败"
						})
					}
				})
			},
			//收藏
			async collection() {
				this.activityInfo.userId = this.$store.state.vuex_user.openId
				await this.$u.api.activityCollection(this.activityInfo).then(res =>  {
					if(res.code == 200) {
						//操作页面变化
						if(this.activityInfo.isCollection == 0) {
							this.activityInfo.isCollection = 1
							this.activityInfo.collectionNumber = this.activityInfo.collectionNumber + 1
							uni.showToast({
								icon:"success",
								title:"收藏成功"
							})
						} else {
							this.activityInfo.isCollection = 0
							this.activityInfo.collectionNumber = this.activityInfo.collectionNumber - 1
							uni.showToast({
								icon:"success",
								title:"取消收藏成功"
							})
						}
					} else {
						uni.showToast({
							icon:"error",
							title:"收藏操作失败"
						})
					}
				})
				
			},
			async apply() {
				if(this.activityInfo.isApply == 0) {
					uni.navigateTo({
						url: "/pages/activity/apply_submit?activityInfo=" + encodeURIComponent(JSON.stringify(this.activityInfo)),
					});
				} else {
					const params = {
						applyUid: this.$store.state.vuex_user.openId,
						infoId: this.activityInfo.id,
					}
					await this.$u.api.applyDelete(params).then(res =>  {
						if(res.code == 200) {
							//修改 报名状态、报名人数
							this.activityInfo.isApply = 0
							this.activityInfo.applyTotal -=1
							uni.showToast({
								icon:"success",
								title:"取消成功"
							})
						} else {
							uni.showToast({
								icon:"error",
								title:"取消失败"
							})
						}
					})
				}
				
			},
			applyUsers() {
				uni.navigateTo({
					url: "/pages/activity/apply?activityInfo=" + encodeURIComponent(JSON.stringify(this.activityInfo)),
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box1 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: auto;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
			
		}
	}
	.box2 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: auto;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			// padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}
	.box3 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: auto;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
			display: flex;
			.v1_view {
				width: 400rpx;
				height: 70rpx;
				// background-color: #f3f3f3;
				background-color: #304D99;
				color: #ffffff;
				border-radius: 20rpx;
				text-align: center;
				padding-top: 15rpx;
			}
			.v1_text {
				font-size: 16px;
				font-weight: 550;
			}
			.v2_view {
				width: 400rpx;
				height: 70rpx;
				background-color: #f3f3f3;
				border-radius: 20rpx;
				text-align: center;
				padding-top: 15rpx;
			}
		}
	}
	.base {
		margin-top: 20px;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #F6F6F6;
		padding-bottom: 35upx;
		position: relative;
		.profily_header {
			height: 120upx;
			width: 120upx;
			/* background-image: url('../../static/my/header.jpg'); */
			background-size: 100%;
			border-radius: 50%;
		}
	
		text {
			margin-left: 20px;
			font-size: 30upx;
		}
	}
	.button {
		margin-right: 8px;
		background-color: #193867;
		color:white;
		width: 60px;
		height: 35px;
		border:0;
		font-size: 15px;
		text-align: center;
		color: #f2f2f2;
		border-radius: 5px;
	}
	.button2 {
		margin-right: 30rpx;
		background-color: #193867;
		color:white;
		width: 100px;
		height: 27px;
		border:0;
		font-size: 27rpx;
		text-align: center;
		color: #f2f2f2;
		border-radius: 5px;
	}
	.u-content {
		margin-top: 20px;
		/* padding: 24rpx; */
		font-size: 32rpx;
		color: #000000;/* $u-content-color; */
		line-height: 1.6;
		
		// 标签形式无效
		/* p {
			color: $u-tips-color;
		} */
	}
	/* 评论区 */
	.comment {
		display: flex;
		padding: 30rpx;
		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}
		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				.name {
					color: #5677fc;
				}
				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;
					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}
				.highlight {
					color: #5677fc;
					.num {
						color: #5677fc;
					}
				}
			}
			.content {
				margin-bottom: 10rpx;
			}
			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;
				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;
					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}
				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;
					.more {
						margin-left: 6rpx;
					}
				}
			}
			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;
				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}
	/* 轮播 */
	.swiper-block {
		height: 700rpx;
		width: 100%;
	}
	
	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		overflow: unset;
	}
	
	.slide-image {
		height: 500rpx;
		width: 500rpx;
		// border-radius: 20rpx; //aspectFit 全边展示时不生效
		// box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
		margin: 0rpx 50rpx;
		z-index: 1;
	}
	
	.active {
		transform: scale(1.14);
		transition: all 0.2s ease-in 0s;
		z-index: 20;
	}
	/* 底部导航栏 */
	.bottom_naviga{
		background-color: #fff;
		width: -webkit-fill-available;    /* 自适应（宽度） */
		height: 120rpx;
		position: fixed;   /*  固定在底部 */
		bottom: 0;
		display: flex;
		// flex-direction: row;    /* 横向排列 */
		box-shadow: 2px 2px 5px #bebebe;
		margin-top: 40rpx;
		.comment_push {
			margin-top: 30rpx;
			margin-left: 30rpx; 
			height: 55rpx;
			width: 200rpx; 
			background-color: #ebebeb;
			border-radius: 30rpx;
			display: flex;
			.text {
				margin-top: 10rpx;
				margin-left: 20rpx; 
				color: #999999;
			}
		}
		.icon {
			margin-bottom: 80rpx;
		}
		.text {
			margin-left: 5rpx;
		}
	}
	/* 发送评论 */
	.plBox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		min-height: 100rpx;
		padding: 20rpx 20rpx 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #F7F7F7;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		textarea {
			flex: 7;
			flex-shrink: 0;
			border-radius: 15rpx;
			max-height: 140rpx !important;
			margin-right: 30rpx;
			border: none;
			background-color: #ffffff;
			padding: 20rpx;
		}
	
		button {
			flex: 1;
			border: 1px solid #D3D3D3;
			color: #ffffff;
			margin: 0;
			padding: 0 5rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			background-color: #304D99;
		}
	}
	.gengduo {
		width: 40rpx;
		height: 40rpx;
		margin-top: 15rpx;
		margin-left: 10rpx;
	}
	.share-b {
		background: rgba(0,0,0,0); 
	}
	button::after {
	   border: none;
	}
</style>
